// 发布类型展示页
import { NavBar, Card, Search, Button, NoticeBar, } from 'react-vant';
import { useState } from 'react'
import { VolumeO } from '@react-vant/icons';
import { useLocation, useNavigate } from 'react-router-dom'
import styles from './fBType.module.css'
export default function FBType() {
    let location = useLocation()
    let navigate = useNavigate()
    const [value, setValue] = useState('')
    const [shopType] = useState([
        '道具', '账号', '装备', '角色', '武器', '卡牌'
    ])
    let typeId = location.state.item._id
    let name = location.state.item.typeName
    let [obj, setObj] = useState({ shoopType: '' })
    return <>
        <NavBar
            title={name}
            onClickLeft={() => navigate('/zin/publishProduct')} />
        <NoticeBar mode="closeable" leftIcon={<VolumeO />} text='请选择您想要出售的商品类型。如果没有想要的类型,请点击“其他”,并输入您想要的类型。'>
        </NoticeBar>
        <h2 align='center'>商品类型:{`${obj.shoopType}`}</h2>
        <div className={styles.box3}>
            {
                shopType.map((item) => {
                    return (
                        <div key={item}>
                            <Card round border className={obj['shoopType'] == item ? styles.box2 : styles.box} onClick={() => {
                                setObj({ ...obj, shoopType: item })
                                setValue('')
                            }} >
                                <Card.Body>{item}</Card.Body>
                            </Card>
                        </div>
                    )
                })
            }
            <Card round border className={obj['shoopType'] == '其他' || (obj['shoopType'] == value && value.trim() != '' && !shopType.includes(value)) ? styles.box2 : styles.box} onClick={() => {
                setObj({ ...obj, shoopType: '其他' })
                setValue('')
            }} >
                <Card.Body>{value && !shopType.includes(value) ? value : '其他'}</Card.Body>
            </Card>
        </div>
        {obj.shoopType == '其他' && !shopType.includes(value) && <Search placeholder='请输入要出售的类型' value={value} border onSearch={(value) => {
            setValue(value)
            setObj({ ...obj, shoopType: value })
        }} />}

        <Button color='linear-gradient(to right, yellow, red)' round block className={styles.button} disabled={!obj.shoopType || obj.shoopType == '其他'} onClick={() => {
            navigate('/fBSubmit', { state: { typeId, name, shoopType: obj.shoopType } })
        }}>
            下一步
        </Button>

    </>
}
